<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<script src="http://46.19.36.112:8080/socket.io/socket.io.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title> Server </title>
<script type='text/javascript'>
	var socket = io.connect('http://46.19.36.112:8080');
	var users = new Array();
	var userNames = new Array();
	var thisCode;
	var localPlayerList;
	function getUserById(id){
		return users.indexOf(id);
	}
	socket.on('connect',function() {
		me = new BoardObject();
		$('#status').html('Connected');
		if(me.UID != getCookie('klmz-guess-uid')){
			setCookie('klmz-guess-uid', getID(25), 5);
			me.UID = getCookie('klmz-guess-uid');
		}
		socket.emit('nodeConnect', {type : 'board', 'uid' : me.UID});
		socket.on('execFunction', function(data){
			console.log('execFunction');
			if(me)
				executeFunctionByName(data.fnName, me, data.args);
		});
	
	});
	
	//make Board object
	var BoardObject = function(options){
		this.ctor(options);
	}
	
	BoardObject.prototype.ctor = function(){
	
	}
	BoardObject.prototype.reconnected = function(options){
		$("#codeViewer").html('Reconnected!<br>'+options.code);
		$("#codeViewer").fadeIn();
		$("#codeViewer").delay(3000).fadeOut();
	}
	
	BoardObject.prototype.updateData = function(data){
		console.log('updateData', data);
			if(typeof data.connectCode  != 'undefined'){
				$('#codeViewer').html(data.connectCode);
				$('#codeViewer').fadeIn();
				$('#codeViewer').delay(3000).fadeOut();
			}
			if(typeof data.playerList != 'undefined'){
				localPlayerList = data.playerList;
				html = ""
				for(var i=0;i<localPlayerList.length;i++){
					html += localPlayerList[i].name + "<br>";
				}
					$('#players').html("Players<br>" + html );
			}
	}
	
	$(document).ready(function(){
		$("#status").toggle(function(){
			$('#codeViewer').fadeIn();
		},function(){
			$('#codeViewer').fadeOut();
		});
		
		$("#btnSendCard").click(function(){
			socket.emit('sendCardToPlayer', {playerID : users[0], card : "One thing, and another"});
		});
		
		$("#btnSendCardI").click(function(){
			socket.emit('sendCardToPlayer', {playerID : users[1], card : "More cards!"});
		});
		
		$("#btnStartClock").toggle(function(e){
			e.preventDefault();
			runClock();
			$(this).val('Stop');
		},function(){
			$(this).val('Start');
			if(typeof smallClock != 'undefined'){
				
				clearInterval(smallClock);
			}
		});
		
		$("#btnStopClock").click(function(e){
			e.preventDefault();
			if(typeof smallClock != 'undefined'){
				clearInterval(smallClock);
			}
		});
		
		$("#btnResetClock").click(function(e){
			e.preventDefault();
			time=0;
			smallTime=0;
		});
	});
function executeFunctionByName(functionName, context , args) {
  var args = Array.prototype.slice.call(arguments).splice(2);
  var namespaces = functionName.split(".");
  var func = namespaces.pop();
  for(var i = 0; i < namespaces.length; i++) {
    context = context[namespaces[i]];
  }
  return context[func].apply(this, args);
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
		if(y != 'null' && y != ""){
			return unescape(y);
		}else{
			return false;
		}
    }
  }
}
function setCookie(c_name,value,exdays)
{
	var exdate=new Date();
	exdate.setDate(exdate.getDate() + exdays);
	var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
	document.cookie=c_name + "=" + c_value;
}
function getID(length){
	sPassword = "";
    for (i=0; i < length; i++) {
        numI = getRandomNum();
        sPassword = sPassword + numI;
	}

    return sPassword;
}
function getRandomNum() {

    // between 0 - 1
    var rndNum = Math.random()

    // rndNum from 0 - 1000
    //rndNum = parseInt(rndNum * 1000);

    // rndNum from 33 - 127
    //rndNum = (rndNum % 94) + 33;
	rndNum = parseInt(rndNum*8)+1;
    return rndNum;
}
var smallClock;
var maxTime = 30;
var time=0;
var smallTime=0;
function runClock(){	
	$('.big.clockHand').css('-webkit-transform', 'rotate(-90deg)');
	$('.small.clockHand').css('-webkit-transform', 'rotate(-90deg)');
	smallClock = setInterval(function(){
		
		smallDeg = 360*(smallTime/1000);
		smallDeg = smallDeg - 90;
		$('.small.clockHand').css('-webkit-transform', 'rotate('+smallDeg+'deg)');
		smallTime = smallTime + 10;
		if(smallTime>1000){
			deg = 360*(time/maxTime);
			deg = deg - 90;
			$('.big.clockHand').css('-webkit-transform', 'rotate('+deg+'deg)');
			time = time +1;
			smallTime=0
		}
	}, 10);
}
</script>
</head>
<body>
<div id='status' class='status'>
</div>
<div id='messages' class='messages'>
</div>
<div id='players' class='players'>
Players:<br>
</div>
<div class='clock'>
	<div class='clockCircle'>
	<div class='small clockHand'>
	</div>
	<div class='big clockHand'>
	</div>
	
	</div>
	<input type='button' id='btnStartClock' value='Start'>
	<input type='button' id='btnStopClock' value='Stop'>
	<input type='button' id='btnResetClock' value='Reset'>
</div>
<div id='controls'>
<br>
<br>
<input type='button' id='btnSendCard' value='Send card'>
<input type='button' id='btnSendCardI' value='Send card 2'>
</div>
<div id='codeViewer' class='codeViewer'>
</div>
<div id='questionSetView' class='questionSetView'>
	<ul>
		<li> <span class='btnQ Wrong'>x</span><span class='btnQ Right'>v</span><span class='question'>Question 1</span></li>
		<li> <span class='btnQ Wrong'>x</span><span class='btnQ Right'>v</span><span class='question'>Question 2</span></li>
		<li> <span class='btnQ Wrong'>x</span><span class='btnQ Right'>v</span><span class='question'>Question 3</span></li>
		<li> <span class='btnQ Wrong'>x</span><span class='btnQ Right'>v</span><span class='question'>REALLY LONG QUESTION<br> man longg thousand long, longer thanever<br><br>before<br>reallythanever<br><br>before<br>reallythanever<br><br>before<br>reallythanever<br><br>before<br>reallythanever<br><br>before<br>really</span></li>
		<li> <span class='btnQ Wrong'>x</span><span class='btnQ Right'>v</span><span class='question'>Example of a slightly longer question blabl blabalbalbalablbalabalb</span></li>
	</ul>
</div>
</body>
</html>